<template>
  <el-container>
    <el-header>
      <div class="header-content">
        <h1>面馆点餐系统</h1>
        <el-menu
          mode="horizontal"
          :router="true"
          :default-active="$route.path"
          background-color="#409EFF"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-menu-item index="/ordering">点餐</el-menu-item>
          <el-menu-item index="/orders">我的订单</el-menu-item>
          <el-menu-item index="/dishes">菜品管理</el-menu-item>
        </el-menu>
      </div>
    </el-header>
    <el-main>
      <router-view></router-view>
    </el-main>
  </el-container>
</template>

<script setup>
// Main application component
</script>

<style>
.el-header {
  background-color: #409EFF;
  color: white;
  padding: 0;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 100%;
}

.header-content h1 {
  margin: 0;
  font-size: 24px;
}

.el-menu {
  border-bottom: none;
}

.el-main {
  padding: 20px;
}
</style> 